<template>
  <div class="svgcontainer" :id="containerId">
    <svg v-if="isShowSvg" @click="svgClick">
      <path :d="`M${points.x1} ${points.y1} L${points.x2} ${points.y2} L${points.x3} ${points.y3} Z`" fill="#00cefe" id="v1" />
      <ellipse :cx="points.x1" :cy="points.y2" :rx="hArr[0]" :ry="tyr" style="fill:#00cefe;stroke-width:0" id="v2" />
      <path :d="`M${points.x4} ${points.y4} L${points.x6} ${points.y6} L${points.x7} ${points.y7} L${points.x5} ${points.y5} Z`" fill="#ffb63b" id="v3" />
      <ellipse :cx="points.x1" :cy="points.y4" :rx="hArr[1]" :ry="tyr" style="fill:#ff681a;stroke-width:0" id="v4" />
      <ellipse :cx="points.x1" :cy="points.y6" :rx="hArr[2]" :ry="tyr" style="fill:#ffb63b;stroke-width:0" id="v5" />
      <path :d="`M${points.x8} ${points.y8} L${points.x10} ${points.y10} L${points.x11} ${points.y11} L${points.x9} ${points.y9} Z`" fill="#ade67f" id="v6" />
      <ellipse :cx="points.x1" :cy="points.y8" :rx="hArr[3]" :ry="tyr" style="fill:#61961e;stroke-width:0" id="v7" />
      <ellipse :cx="points.x1" :cy="points.y10" :rx="hArr[4]" :ry="tyr" style="fill:#ade67f;stroke-width:0" id="v8" />

      <g stroke="black" stroke-width="0">
        <circle id="pointA" :cx="points.x3" :cy="points.y3 - 20" r="4" fill="#00cefe" />
        <circle id="pointB" :cx="points.x7" :cy="points.y7 - 20" r="4" fill="#ffb63b" />
        <circle id="pointC" :cx="points.x11" :cy="points.y11 - 20" r="4" fill="#ade67f" />
      </g>
      <path id="lineA" :d="`M${points.x3} ${points.y3 - 20} L${points.x3 + 16} ${points.y3 - 20} L${points.x3 + 30} ${points.y3} L${points.x3 + 120} ${points.y3}`" stroke="#00cefe" stroke-width="3" fill="none" />

      <path id="lineB" :d="`M${points.x7} ${points.y7 - 20} L${points.x7 + 16} ${points.y7 - 20} L${points.x7 + 30} ${points.y7} L${points.x7 + 120} ${points.y7}`" stroke="#ffb63b" stroke-width="3" fill="none" />

      <path id="lineC" :d="`M${points.x11} ${points.y11 - 20} L${points.x11 + 16} ${points.y11 - 20} L${points.x11 + 30} ${points.y11} L${points.x11 + 120} ${points.y11}`" stroke="#ade67f" stroke-width="3" fill="none" />
      <!-- Label the points -->
      <g font-size="14" font="sans-serif" stroke="none" text-anchor="middle">
        <text :x="points.x3 + 60" :y="points.y3" dy="-10" fill="#00cefe">{{conedata[0].label}}</text>
        <text :x="points.x7 + 60" :y="points.y7" dy="-10" fill="#ffb63b">{{conedata[1].label}}</text>
        <text :x="points.x11 + 60" :y="points.y11" dy="-10" fill="#ade67f">{{conedata[2].label}}</text>
      </g>

      <g font-size="14" font="sans-serif" stroke="none" text-anchor="middle">
        <text :x="points.x3 + 110" :y="points.y3" dy="-10" fill="#00cefe">{{conedata[0].value}}</text>
        <text :x="points.x7 + 110" :y="points.y7" dy="-10" fill="#ffb63b">{{conedata[1].value}}</text>
        <text :x="points.x11 + 110" :y="points.y11" dy="-10" fill="#ade67f">{{conedata[2].value}}</text>
      </g>
    </svg>
  </div>
</template>
<script>
export default {
  props: {
    containerId: {
      type: String,
      default: ""
    },
    conedata: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      isShowCanvas: false,
      tyr: 5,
      hArr: [],
      points: {},
      isShowSvg: false,
      ange: 86
    };
  },
  mounted() {
    const container = document.querySelector(`#${this.containerId}`);
    const cw = container.offsetWidth;
    const ch = container.offsetHeight;
    this.$nextTick(() => {
      this.initCharts(cw, ch);
    });
  },
  methods: {
    svgClick(e) {
      const obj = {
        "v1": "0",
        "v3": "1",
        "v6": "2"
      };
      this.$emit("svgClick", this.conedata[obj[e.target.id]]);
    },
    initCharts(cw, ch) {
      const getNum = h => Number((h * Math.tan(ange)).toFixed(2));
      const ange = 45; // 角度
      const h5 = Math.ceil((ch - 16) / Math.tan(ange));
      const h1 = Math.ceil(h5 * 0.33);
      const h3 = Math.ceil(h5 * 0.66);
      const h2 = Math.ceil(h5 * 0.1) + h1;
      const h4 = Math.ceil(h5 * 0.1) + h3;
      this.hArr = [h1, h2, h3, h4, h5];
      const x1 = Math.ceil(cw / 3);
      const y1 = 6;
      const x2 = x1 - h1;
      const y2 = getNum(h1);
      const x3 = x1 + h1;
      const y3 = getNum(h1);
      const x4 = x1 - h2;
      const y4 = getNum(h2);
      const x5 = x1 + h2;
      const y5 = getNum(h2);
      const x6 = x1 - h3;
      const y6 = getNum(h3);
      const x7 = x1 + h3;
      const y7 = getNum(h3);
      const x8 = x1 - h4;
      const y8 = getNum(h4);
      const x9 = x1 + h4;
      const y9 = getNum(h4);
      const x10 = x1 - h5;
      const y10 = getNum(h5);
      const x11 = x1 + h5;
      const y11 = getNum(h5);
      this.points = { x1, x2, x3, x4, x5, x6, x7, x8, x9, x10, x11, y1, y2, y3, y4, y5, y6, y7, y8, y9, y10, y11 };
      this.isShowSvg = true;
    }
  }
};
</script>
<style lang="less" scoped>
.svgcontainer {
  width: 100%;
  height: 100%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;

  svg {
    height: 100%;
    width: 100%;
    cursor: pointer;
  }
}
</style>
